<!--
 * @Author: chen jiao
 * @Date: 2021-07-09 09:54:04
 * @LastEditTime: 2021-11-24 09:52:16
 * @LastEditors: Please set LastEditors
 * @Description: 添加会员标签页面设置标签类型子组件
 * @FilePath: \ebc-admin\src\views\member\MemberInfo\component\edit-form-style.vue
-->
<template>
  <el-form ref="form" 
    :model="form" 
    label-width="140px" 
    :inline="true"
  >
    <el-form-item 
      v-for="(edit, index) in formList"
        :key="index"
        :label="edit.label"
        :prop="edit.key"
        :class="{'have': edit.have}"
    >
        <div v-if="edit.type === 'select-input'">
          <template>
              <el-select 
                v-model="edit.select.value"
                :disabled="edit.disabled"
                :placeholder="edit.placeholder"
              >
                <el-option
                    v-for="item in edit.select.options"
                    :key="item.key + Math.ceil(Math.random()*10)"
                    :label="item.label"
                    :value="item.value"
                />
             </el-select>
              <el-input
                v-model="edit.term"
                class="el-inp"
                :disabled="edit.disabled"
                :placeholder="edit.placeholder"
              />
            <el-button  @click="add(edit)" class="pl">+</el-button> 
          </template>
        </div>
        <div v-else-if="edit.type === 'select-ninput'" class="select-ninput">
            <template>
                <el-select 
                  v-model="edit.value"
                  :disabled="edit.disabled"
                  :placeholder="edit.placeholder"
                >
                  <el-option
                      v-for="item in edit.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
                <el-button  @click="add(edit)" class="pl">+</el-button> 
            </template>
        </div>
        <div v-else-if="edit.type === 'select-group'" class="select-group">
          <template>
            <el-cascader 
             v-model="value"
             :props="options" 
             @change="handleChange" 
              clearable>
            </el-cascader>
        </template>
         <el-button  @click="add(edit)" class="pl">+</el-button> 
      </div>
      <div v-else-if="edit.type === 'radio-group'" class="radio-group">
        <el-radio-group v-model="edit.value">
          <el-radio 
          v-for="item in edit.radioList"
          :key="item.label"
          :label="item.label"
          v-model="item.value">
          </el-radio>
        </el-radio-group>
      </div>
        <slot v-else-if="edit.type === 'slot'" :edit="edit" :name="edit.name" />
        <!-- 标签位 -->
        <div class="showTags" >
          <template>
              <el-tag
                v-for="(tag,index) in edit.dynamicTags"
                :key="index"
                closable
                :disable-transitions="false"
                @close="handleClose(tag.name ,edit.dynamicTags)">
                    {{tag.name}}
              </el-tag>
          </template>
       </div>  
    </el-form-item>
  
</el-form>
</template>

<script>
// 接口
import {  getCity } from '@/api/member.js'
// 公共方法
import { asyncApiFun } from '@/utils/utils'
  export default {
    name:'editFormStyle',
    props: {
      formList: {
        type: Array,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        form: {
          name: '',
          region: '',
          age:'',
          date1: '',
          date2: '',
          logic:'',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        dynamicTags:[] , //标签数组
        value: [],       //级联选择器
        city:[],
        lists: {
          '000000': {
            label: '',
            list: null
          }
        },
        options: {
          lazy: true,
          checkStrictly: true,
          lazyLoad: async (node, resolve) => {
              const code = node.level === 0 ? '000000' : node.data.value;
              if (code in this.lists && this.lists[code].list !== null) {
                resolve(this.lists[code].list)
              } else {
                const [res] = await asyncApiFun( getCity, { sup : code  })
                if(res) {
                  res.data.forEach(item => {
                    this.lists[item.areaCode] = {
                      label: item.areaName,
                      value:item.areaCode,
                      list: null
                    }
                  })
                  const _list = res.data.map(item => ({
                    value: item.areaCode,
                    label: item.areaName,
                    leaf: node.level >= 2
                  }))
                  this.lists[code].list = _list;
                  resolve(this.lists[code].list)
                }
              }
          } 
        }
      }  
    },
    computed: {
      _formList() {
        return this.formList;
      },
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      downList( label,value ){
        console.log(label,value)
      },
      // 点击“+”按钮
      add(edit){
        const tagItem = {}
        if( edit.type == "select-group"){
             tagItem.name = []
            this.city.forEach(item => {
                tagItem.name.push(item.label)
                tagItem[item.key]= item[item.key]
             }); 
            tagItem.key = edit.key
            tagItem.name = tagItem.name.join(' ')
            
        } 
        else if (edit.type == "select-ninput" ){
            const _obj = edit.options.find(item => item.value === edit.value);
            tagItem.name =  _obj.label;
            tagItem.term = _obj.value;
            tagItem.operator = "=="
            tagItem.key = edit.key
        }
        else {
            tagItem.operator = edit.select.value
            tagItem.term = edit.term
            tagItem.name = edit.label + edit.select.value + tagItem.term
            tagItem.key = edit.key

        }
            edit.dynamicTags.push(tagItem)
            // console.log(edit.dynamicTags);
      },
      // 添加标签处理函数
     handleClose(tag,data) {
        data.splice(data.indexOf(tag), 1);
      },
    // Cascader 处理函数
      handleChange(value) {
        this.city = [
          {key:'areaProvinceId',areaProvinceId:value[0]},
          {key:'areaCityId',areaCityId:value[1]},
          {key:'areaDistrictId',areaDistrictId:value[2]},
        ]
        value.forEach((code,index) => {
          this.city[index].label = this.lists[code].label
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-inp {
  width:200px;
  padding-left:20px;
}
 .pl{
   margin-left: 20px;
 }
 .select-group{
    display: flex;
  }
.select-group .el-select{
  flex:1;
}
.showTags{
  display: block;
  position: relative;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
</style>